NaN

css基础-小程序版本

(一) 给组件添加样式的两种方法

1. 行内样式

2.外部样式

(二) 选择器和选择器优先级

  1. 元素选择器
  2. 类选择器
  3. 后代选择器(重要)
  4. 群组选择器
  5. 选择器优先级

01 元素选择器

<view> 首页 </view>
<view> 首页 </view>

<text> text1 </text>
<text> text1 </text>

view {
    color: red;
}
text {
    color: green;
}

02 类选择器

/* 定义一个类aa */
.aa {
    border: 1px solid red;
}

<view class="aa"> 首页 </view>

03 后代选择器

<view class="aa"> 
    <text>111111</text>
</view>  

<view class="bb">
    <text>2222222</text>
</view>

 .bb text {
     color: red;
 }

04 群组选择器

<view>
    aaa
</view>

<text>
    bbb
</text>

view,text,.aa {
    color: green;
}

05 选择器优先级

  1. 同等条件下, 后面的覆盖前面的
  2. 选择器越长, 优先级越高
  3. 超级优先(在样式后面加!important)

(三) 常用css样式

  1. 三个简单样式
    • 边框border
    • 宽高设置
    • 背景颜色
  2. 圆角设置
  3. 文字大小、颜色、行高、加粗
  4. margin 外边距设置
  5. padding 内边距设置
  6. box-sizing 设置元素宽高计算方式
  7. 定位
    • 固定定位
    • 相对定位和绝对定位

(1) 三个简单样式

  1. 边框 border
  2. 宽 with 高height
  3. 背景颜色 background-color
<view>
   aaaaa
</view> 

view {
    color: red;
    /* 边框大小 实线或虚线 颜色 */
    border: 2rpx solid blue;
    /* 设置宽高 */
    width: 375rpx;
    height: 375rpx;
    /* 背景颜色 */
    background-color: gray;
}

(2) 圆角设置 

<view class="aa"> </view> 

<view class="bb"> </view> 

view {
   border: 2rpx solid blue;
   width: 200rpx;
   height: 200rpx;
}

.aa {
    border-radius: 50rpx;
}

.bb {
    border-radius: 50%;
}

(3) 文字大小、颜色、行高、加粗 

<view class="aa"> 我爱北京</view>

<view class="bb">我爱中国</view>

.aa {
   /* border: 1px solid green; */
   /* 文字大小 */
   font-size: 40rpx;
   /* 字体颜色 */
   color: red;
   /* 设置行高 */
    line-height: 50rpx; 
} 

.bb {
    /* border: 1px solid green; */
    /* 文字大小 */
    font-size: 40rpx;
    /* 字体颜色 */
    color: red;
    /* 设置行高1表示字体高度的1倍 */
     line-height: 1; 
     /* 加粗 */
     font-weight: bold;
 }

(4) margin 外边距设置 

<view class="aa"> 我爱北京</view>

<view class="bb">我爱中国</view>

view {
    border: 1px solid red;
    width: 200px;
    height: 200px;
}

.aa {
    /* margin的四个方向 */
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.bb {
    /* 四个方向的外边距都是10px */
    margin: 10px;
    /* 简写:四个方向的外边距不一样 */
    margin: 10px 20px 30px 40px;
}

(5) padding 内边距设置 

<view class="aa">
    我爱北京 我爱北京 我爱北京 我爱北京 我爱北京 我爱北京 我爱北京 我爱北京 我爱北京 我爱北京 我爱北京 我爱北京
</view>

<view class="bb">
    我爱中国 我爱中国 我爱中国 我爱中国 我爱中国 我爱中国 我爱中国 我爱中国 我爱中国 我爱中国 我爱中国 我爱中国
</view>

view {
    border: 1px solid red;
    width: 200px; 
}

.aa {
  padding-top: 10px; 
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.bb {
    margin-top: 20px;
    padding: 10px;
}

(6) box-sizing 设置元素宽高计算方式 

<view class="aa">
    
</view>

<view class="bb">
    
</view>

view {
    border: 1px solid red;
    width: 100px;
    height: 100px;
}

.aa {
    /* 默认情况下, 给元素添加边框和padding,元素会变大 */
    border: 10px solid;
    padding: 10px;
}

.bb {
    margin-top: 20px;
    border: 10px solid;
    padding: 10px;
    /* 把box-sizing设置为border-box, 元素不会变大 */
    box-sizing: border-box;
}

(四) 弹性盒子(css进阶)

  • display: flex 把一个元素设置为弹性盒子
    • 子元素统统可以设置宽高
    • 所有子元素排成了一行
  • align-items 垂直对齐方式
    • flex-start 顶部对齐
    • center 垂直居中
    • flex-start 底部对齐
  • justify-content 水平对齐方式
    • flex-start 左对齐
    • center 水平居中
    • flex-end 右对齐
    • space-around 分散对齐
    • space-between 两端对齐
  • flex-grow 剩余空间分配
    • 对子元素(组件)进行设置
    • 子元素都设置为1, 表示把剩余空间平均分配, 每个子元素获得1份
    • 对某个子元素设置为1, 表示把剩余空间分成1分, 全给了该子元素(常用)
  • flex-direction 设置内容排列方向
  • flex-wrap 设置换行

(1) 水平对齐和垂直对齐方式 

<view class="box">
    <view class="item"> 111 </view>
    <view class="item"> 222 </view> 
    <text class="item">bbb</text> 
</view>

.box {
    border: 1px solid;
    width: 350px;
    height: 200px;
    /* display样式 block-块级 none-隐藏 flex-设置为弹性盒子*/
    display: flex;
    /* 水平方向对齐 justify-content */
    /* 右对齐 */
    justify-content: flex-end; 
    /* 居中 */
    justify-content: center;
    /* 左对齐 */
    justify-content: flex-start;
    /* 分散对齐 */
    justify-content:space-around;
    /* 两端对齐 */
    justify-content: space-between; 

    /* 垂直方向 align-items*/
    align-items: flex-start;
    align-items: center;
    align-items: flex-end;
} 
.item {
    border: 1px solid green;
    width: 60px;
    height: 50px;
}

(2) 剩余空间分配 

<view class="box">
    <view class="item a"> 111 </view>
    <view class="item b"> 222 </view> 
    <text class="item c">bbb</text> 
</view>

.box {
    border: 1px solid;
    width: 350px;
    height: 200px;
    /* display样式 block-块级 none-隐藏 flex-设置为弹性盒子*/
    display: flex;  
} 
.item {
    border: 1px solid green;
    width: 60px;
    height: 50px;
}

.a {
    flex-grow: 1;
}
/* .b {
    flex-grow: 1;
}
.c {
    flex-grow: 1;
} */

相关样式: flex-shrink

(3) 排列方向

弹性盒子元素默认横向排列

<view class="box">
    <view class="item"> 111 </view>
    <view class="item"> 222 </view> 
    <text class="item">bbb</text> 
</view>

.box {
    border: 1px solid;
    width: 350px;
    height: 300px;
    /* display样式 block-块级 none-隐藏 flex-设置为弹性盒子*/
    display: flex;  
    /* 设置子元素的排列方向 */
    flex-direction: column;
    /* 纵向排列时, 水平与垂直对齐方式和原来相反 */
    justify-content: space-between;
    align-items: center;
} 
.item {
    border: 1px solid green;
    width: 60px;
    height: 50px;
}

(4) 换行

(五) 静态页面实战

(1) 实践1-个人中心 

<!-- 头部 -->
<view class="header">  
    <view class="avatar-box">
        <image class="avatar" src="../../img/home.png" mode=""/>
        <text>儒清</text>
    </view>
    <image src="../../img/arrow.png" mode=""/>
</view>


<!-- 列表  -->
<view class="list">
    <view class="item">
        <text>我的订单</text>
        <!-- 图片组件 -->
        <image src="../../img/arrow.png" mode="" />
    </view>

    <view class="item">
        <text>收藏</text>
        <!-- 图片组件 -->
        <image src="../../img/arrow.png" mode="" />
    </view>
    <view class="item">
        <text>我的地址</text>
        <!-- 图片组件 -->
        <image src="../../img/arrow.png" mode="" />
    </view>
    <view class="item">
        <text>设置</text>
        <!-- 图片组件 -->
        <image src="../../img/arrow.png" mode="" />
    </view> 
</view> 

<!-- 底部 -->
<view>

</view>

/* 背景设置为灰色 */
page {
    background-color: #f4f4f4;
}
.header { 
    height: 200rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 30rpx;
    padding-left: 30rpx;
    margin-top: 10rpx;
}
.header image {
    width: 32rpx;
    height: 48rpx;
}
.header .avatar {
    width: 128rpx;
    height: 128rpx;
}
.header .avatar-box {
    display: flex; 
    align-items: center;
}
.header .avatar-box text {
    margin-left: 10rpx;
}




.list { 
    /* 背景设为白色 */
    background-color: #fff;
    margin-top: 10rpx;
}

.list .item {
    height: 88rpx;
    /* 底边框 */
    border-bottom: 2rpx solid #e8e8e8;
    /* 设置为弹性盒子 */
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    /* 垂直方向居中 */
    align-items: center; 
    /* padding-left: 30rpx;
    padding-right: 30rpx; */
    margin-left: 30rpx;
    margin-right: 30rpx;
}
.list image {
    width: 32rpx;
    height: 48rpx;
}

(2) 实践2-我的收藏 

<view class="list">
    <view class="item">
        <image src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png" mode=""/>
        <view class="box">
            <view>
                新鲜水果
            </view>
            <view class="price">
                <text>¥9.00</text>
                <image class="cart" src="../../img/carting.png" mode=""/>
            </view>
        </view>
    </view> 
    <view class="item">
        <image src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png" mode=""/>
        <view class="box">
            <view>
                新鲜水果
            </view>
            <view class="price">
                <text>¥9.00</text>
                <image class="cart" src="../../img/carting.png" mode=""/>
            </view>
        </view>
    </view> 
    <view class="item">
        <image src="https://mall.s.maizuo.com/f6f787571eb0f43ca5db9bb4e3a3bb80.png" mode=""/>
        <view class="box">
            <view>
                新鲜水果
            </view>
            <view class="price">
                <text>¥9.00</text>
                <image class="cart" src="../../img/carting.png" mode=""/>
            </view>
        </view>
    </view> 

</view>

page {
    background-color: #f4f4f4;
}

.list {
    background-color: #fff; 
    margin-top: 10rpx;
}
.list .item {
    border-bottom: 1px solid #e8e8e8;
    height: 220rpx;
    display: flex;
}
.list .item image {
    width: 220rpx;
    height: 220rpx;
}

.list .box { 
    /* 剩余空间分配 */
    flex-grow: 1;
    /* 设置为弹性盒子 */
    display: flex;
    /* 设置排列方向 */
    flex-direction: column;
    justify-content: space-around;
   
}

.list .box .cart {
    width: 40rpx;
    height: 40rpx;
}
.list .price {
    display: flex;
    justify-content: space-between;
    padding-right: 30rpx;
}
.list .price text {
    color: #c03d37;
}

(3) 实践3-购物车 

<view class="list">
  <view class="item" wx:for="{{list}}">
    <checkbox value="" />
    <image src="{{item.imgUrl}}" mode="" />
    <view class="box">
      <view> 【山东】金秋红蜜桃 </view>
      <view class="price">
        <text class="red">￥39.90</text>
        <view class="buy">
          <text class="flag">-</text>
          <text class="num">5</text>
          <text class="flag r">+</text>
        </view>
      </view>
    </view>
  </view> 
</view>

page {
    background-color: #f4f4f4;
  }
  
  .list {
    /* border: 1px solid red; */
    background-color: #fff;
    margin-top: 10rpx;
  }
  .list .item {
    height: 256rpx;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
  }
  .list .item checkbox {
    margin-left: 20rpx;
  }
  
  .list .item image {
    width: 190rpx;
    height: 190rpx;
    background-color: #f4f4f4;
    margin-left: 20rpx;
  }
  .list .item .box { 
    flex-grow: 1;
    height: 190rpx;
    margin-left: 10rpx;
    margin-right: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .list .price {
    display: flex;
    justify-content: space-between;
  }
  .list .red {
    color: #c03d37;
  }
  .list .buy {
    display: flex; 
  }
  .list .flag {
    border: 1px solid #999;
    width: 40rpx;
    border-radius: 50%;
    /* 文字居中 */
    text-align: center; 
  }
  .list .buy .r {
    background-color: #c03d37;
    color: #fff;
  }
  .list .buy .num {
    margin-left: 10rpx;
    margin-right: 10rpx;
  }
  /* 修改多选框样式 */
  checkbox .wx-checkbox-input {
    border-radius: 50%;
    width: 40rpx;
    height: 40rpx;
  }
  /* 修改多选框 */
  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    color: #fff!important; 
    background-color: #c03d37;
  }


  .count { 
      background-color: #fff;
      height: 90rpx;
      /* 设置为固定定位 */
      position: fixed;
      width: 100%;
      /* 放到底部 */
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .count .left {
      display: flex;
      align-items: center;
      margin-left: 30rpx;
  }

  .count .right {
      display: flex;
      align-items: center;
  }
  .count .right .money {
      color: #c03d37;
      margin-left: 10rpx;
  }
  .count .right .btn { 
      height: 70rpx;
      width: 160rpx;
      border-radius: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 10rpx;
      background: linear-gradient(90deg,#ff6034,#ee0a24);
      color: #fff;
      margin-right: 30rpx;
  }

(4) 实践4-首页

(1) 分类列表

<view class="list">
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
</view>

.list {
    border: 1px solid green;
    display: flex;
    /* 换行设置 */
    flex-wrap: wrap;
}
.list .item { 
    width: 25%;
    height: 190rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border:1px solid green;
}

.list .item image {
    width: 90rpx;
    height: 90rpx;
}

(2) 商品列表

<!-- 轮播图 -->
<view class="swiper">
    <image src="http://static.huruqing.cn/fresh/banner3.jpeg" mode=""/>
</view>

<view class="sort">
    <text>推荐</text>
    <text>销量</text>
    <text>价格</text>
</view>

<view class="goods">
    <view class="item">
        1
    </view>
    <view class="item">
        1
    </view>
    <view class="item">
        1
    </view>
    <view class="item">
        1
    </view>
</view>

page {
    background-color: #f4f4f4;
}
.swiper image {
    width: 100%;
}

.sort { 
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;
}

.goods { 
    background-color: #fff;
    display: flex;
    /* 不换行 */
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.goods .item {
    border:  1px solid blue;
    height: 510rpx;
    width: 40%;
    box-sizing: border-box;
    /* 把剩余空间分配给.item */
    flex-grow: 1;
}
/* 新的选择器 */
.goods .item:nth-child(even) { 
    margin-left: 20rpx;
}

(3) 完整代码

<!-- 轮播图 -->
<view class="swiper">
    <image src="http://static.huruqing.cn/fresh/banner3.jpeg" mode=""/>
</view>
<view class="type">
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
    <view class="item"> 
        <image src="http://static.huruqing.cn/fresh/r1.png" mode=""/>
        <text>鲜果</text>
    </view> 
</view>


<view class="sort">
    <text>推荐</text>
    <text>销量</text>
    <text>价格</text>
</view>

<view class="goods">
    <view class="item">
         <image src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" mode=""/>
         <view class="box">
             <view class="title"> 【山东】金秋红蜜桃 </view>
             <view class="desc"> 基地果园现摘现发 鲜甜红润肉厚 富含维生素 </view>
             <view class="money">
                 <text class="price">￥39.00</text>
                 <text>销量: 9999</text>
             </view>
         </view>
    </view> 
    <view class="item">
         <image src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" mode=""/>
         <view class="box">
             <view class="title"> 【山东】金秋红蜜桃 </view>
             <view class="desc"> 基地果园现摘现发 鲜甜红润肉厚 富含维生素 </view>
             <view class="money">
                 <text class="price">￥39.00</text>
                 <text>销量: 9999</text>
             </view>
         </view>
    </view> 
    <view class="item">
         <image src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" mode=""/>
         <view class="box">
             <view class="title"> 【山东】金秋红蜜桃 </view>
             <view class="desc"> 基地果园现摘现发 鲜甜红润肉厚 富含维生素 </view>
             <view class="money">
                 <text class="price">￥39.00</text>
                 <text>销量: 9999</text>
             </view>
         </view>
    </view> 
    <view class="item">
         <image src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" mode=""/>
         <view class="box">
             <view class="title"> 【山东】金秋红蜜桃 </view>
             <view class="desc"> 基地果园现摘现发 鲜甜红润肉厚 富含维生素 </view>
             <view class="money">
                 <text class="price">￥39.00</text>
                 <text>销量: 9999</text>
             </view>
         </view>
    </view> 
    <view class="item">
         <image src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" mode=""/>
         <view class="box">
             <view class="title"> 【山东】金秋红蜜桃 </view>
             <view class="desc"> 基地果园现摘现发 鲜甜红润肉厚 富含维生素 </view>
             <view class="money">
                 <text class="price">￥39.00</text>
                 <text>销量: 9999</text>
             </view>
         </view>
    </view> 
</view>

page {
    background-color: #f4f4f4;
}
.swiper image {
    width: 100%;
}

.type { 
    display: flex;
    /* 换行设置 */
    flex-wrap: wrap;
    background-color: #fff;
}
.type .item { 
    width: 25%;
    height: 190rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
}

.type .item image {
    width: 90rpx;
    height: 90rpx;
}

.sort { 
    margin-top: 10rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;
}

.goods { 
    background-color: #fff;
    display: flex;
    /* 不换行 */
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.goods .item { 
    height: 510rpx;
    width: 40%;
    box-sizing: border-box;
    /* 把剩余空间分配给.item */
    flex-grow: 1; 
}
/* 新的选择器 */
.goods .item:nth-child(even) { 
    margin-left: 20rpx;
} 

.goods image {
    width: 330rpx;
    height: 330rpx;
    background-color: #f4f4f4;
}

.goods .box { 
    padding-left: 10rpx;
    padding-right: 10rpx; 
}
.goods .box .title {
    font-size: 28rpx;
}
.goods .box .desc {
    margin-top: 10rpx;
    font-size: 28rpx;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.goods .box .money {
    margin-top: 10rpx;
    font-size: 28rpx;
}
.goods .box .money {
    display: flex;
    justify-content: space-between;
}
.goods .box .price {
    color: #c03d37;
}